const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig={
    title: 'hello', // html5文件中<title>部分
    filename: 'index.html', // 默认是index.html，服务器中设置的首页是index.html，如果这里改成其它名字，那么devServer.index改为和它一样，最终完整文件路径是output.path+filename，如果filename中有子文件夹形式，如`./ab/cd/front.html`，只取`./front.html`
    template: './src/index.html', //如果觉得插件默认生成的hmtl5文件不合要求，可以指定一个模板，模板文件如果不存在，会报错，默认是在项目根目录下找模板文件，才模板为样板，将打包的js文件注入到body结尾处
    inject:'body', // true|body|head|false，四种值，默认为true,true和body相同,是将js注入到body结束标签前,head将打包的js文件放在head结束前,false是不注入，这时得要手工在html中加js
}
module.exports = {
    entry: [
        './src/main', 
        'webpack-hot-middleware/client',
        'webpack/hot/only-dev-server',
    ], //main.js中的js可以省略，前面的./不能省
    output:{
        filename:'./dist/app-[hash].js',
        publicPath: '/',
        hashDigestLength: 8
    },
    plugins: [
        new HtmlWebpackPlugin(HtmlWebpackPluginConfig),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [

            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件*/
                include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件*/
                query: {
                  presets: ['latest'] //按照最新的ES6语法规则去转换
                }
            }, {
                test: /\.html$/, 
                use: {
                    loader: 'html-loader',
                    options: {
                    attrs: [':data-src']
                    }
                }
            }, {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        //name: '[path][name].[ext]',
                        name: '[name]2.[ext]', //最后生成的文件名是 output.path+ outputPaht+ name，[name],[ext],[path]表示原来的文件名字，扩展名，路径
                        //useRelativePath:true,
                        outputPath: 'img/' // 后面的/不能少
                    }  
                }]
            },
        ]
    },
    devServer: {
      contentBase: path.join(__dirname, "../dist"), //网站的根目录为 根目录/dist
      port: 3000,
      hot: true,
      inline : true,
      open:true, // 自动打开浏览器
      index:'index.html' // 与HtmlWebpackPlugin中配置filename一样
    }
}